<script setup lang="ts">
import { onMounted, ref } from 'vue';
// @ts-ignore
import baClickEffect from "../tools/clickEffect/baClickEffect";
import ResizeManager from '../manager/resizeManager'

let baEffect: baClickEffect;
const canvasDom = ref<HTMLCanvasElement>();
onMounted(() => {
    baEffect = new baClickEffect({ canvas: canvasDom.value });
    ani();

    ResizeManager.add('canvasBackground', resize);
    resize();
})



const ani = () => {
    baEffect.update();
    requestAnimationFrame(ani);
};

const effect_ClickEvent = (x: number, y: number) => {
    baEffect.Trigger([x, y]);
}

const resize = () => {
    canvasDom.value!.width = window.innerWidth;
    canvasDom.value!.height = window.innerHeight;
    baEffect.setSize(window.innerWidth, window.innerHeight);
}

defineExpose({
    effect_ClickEvent
})

</script>

<template>
    <canvas ref="canvasDom"></canvas>
</template>
<style lang="scss" scoped>
canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 99999;
    pointer-events: none;
}
</style>